import React, { ReactElement, useContext, useMemo } from 'react';
import { View, Image, Text } from 'react-native';

import styles from './style';
import { Store } from '../../reducer';
import { iconPlace } from '../../../../constant/resource';
import { moneySymbol } from '../../../../util/adaptIOS';
import { pointToYuan } from '../../../../util/transformMoney';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { spuInfo } = state;
  const {
    commodityName,
    startTime,
    duration,
    showPrice,
    realPrice,
    headImages
  } = spuInfo;

  return useMemo(
    (): ReactElement => (
      <View style={styles.container}>
        <Image
          source={
            headImages && headImages.length > 0
              ? { uri: headImages[0] }
              : { uri: '' }
          }
          style={styles.headImage}
          defaultSource={iconPlace}
          resizeMode="contain"
        />
        <View style={styles.info}>
          <View style={styles.priceContent}>
            {showPrice !== realPrice && (
              <Text style={styles.showPrice}>{`${moneySymbol()}${pointToYuan(
                showPrice
              )}`}</Text>
            )}
            <Text style={styles.price}>
              <Text style={styles.symbol}>{moneySymbol()}</Text>
              {pointToYuan(realPrice)}
            </Text>
          </View>
          <Text style={styles.name}>{commodityName}</Text>
          <Text style={styles.time}>
            开课时间：{startTime} | {duration}课时
          </Text>
        </View>
      </View>
    ),
    [commodityName, duration, headImages, realPrice, showPrice, startTime]
  );
};
